import React, { useState, useRef } from 'react';
// import "./dnd.less"

// react-dnd核心
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

import VDraggable from './components/VDraggable';

function Dnd(props) {
  const types = {
    item: 'item',
  };
  const [list, setlist] = useState([
    { name: '电视剧', id: 1 },
    { name: '动画剧', id: 2 },
    { name: '话剧', id: 3 },
    { name: '戏剧', id: 4 },
  ]);

  return (
    <div className="main">
      {/* 只有<DndProvider backend={HTML5Backend}></DndProvider>的子孙元素才能使用 react-dnd */}
      <DndProvider backend={HTML5Backend}>
        <div className="list">
          {list.map((item, index) => {
            return (
              <VDraggable
                key={item.id}
                item={item}
                index={index}
                type={types.item}
                list={list}
                setList={setlist}
              />
            );
          })}
        </div>
      </DndProvider>
    </div>
  );
}
export default Dnd;
